<template>
<!-- <div class="login-wrapper">
    <el-header class="header">
      <Logo class="logo" />
      <LangChange class="lang" color="#fff" />
    </el-header>
    <div class="login-container">
      <div class="square">
      <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
    </div>
    <div class="circle">
      <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
    </div>
      <div class="login-form" :class="{ 'is-mobile': isMobile }">
        <div class="form-warp">
          <div style="padding:10px;text-align: center;font-size: 20px;color: #409eff;">月下星辰后台管理系统</div>
          <LoginForm />
          <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane :label="t('login.title')" name="first">
              <LoginForm />
            </el-tab-pane>
            <el-tab-pane :label="t('register.title')" name="second">
              <RegisterForm />
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
    </div>
  </div>  -->
  <div class="container">
    <img src="@/assets/login/login_bj4.jpeg" style="width: 100%;height: 100%;position: absolute;" alt="" srcset="">
    <div class="left">
      <Logo class="logo" />
      <div class="square">
      <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
    </div>
    <div class="circle">
      <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
    </div>
    </div>
    <div class="right">
      <el-header class="header">
      <LangChange class="lang" color="#000" />
    </el-header>
    <div class="box">
    <div class="login-container">
      
      <div class="login-form" :class="{ 'is-mobile': isMobile }">
        <div class="form-warp">
          <div style="padding:10px;text-align: center;font-size: 20px;color: #409eff;">后台管理系统</div>
          <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane :label="t('login.title')" name="first">
              <LoginForm />
            </el-tab-pane>
            <el-tab-pane :label="t('register.title')" name="second">
              <RegisterForm />
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
    </div>
        </div>
      </div>
    </div>
  
</template>

<script setup>
  import { ref, computed } from 'vue';
  import { useStore } from 'vuex';
  import LoginForm from './comp/LoginForm.vue';
  import RegisterForm from './comp/RegisterForm.vue';
  import LangChange from '@/components/LangChange/index.vue';
  import { useI18n } from 'vue-i18n';

  const store = useStore();
  const { t } = useI18n();
  const activeName = ref('first');
  const isMobile = computed(() => {
    return store.getters['setting/isMobile'];
  });

  const handleClick = (val) => {
    console.log(val);
  };
</script>
<style scoped>
.container {
  position: relative; /* 使用relative布局 */
  width: 100%; /* 宽度100% */
  height: 100vh; /* 高度100% */
  /* background-image: url('@/assets/login/login_bj4.jpeg'); */
}
.left {
  position: absolute;
  width: 100%; /* 宽度100% */
  height: 100vh; /* 高度100% */
   /*background: linear-gradient(200deg, #e3c5eb, #a9c1ed); 左侧背景色 */
   
}
.right {
  position: absolute;
  right: 0;
  width: 35.5%; /* 宽度100% */
  height: 100vh; /* 高度100% */
  /* background-color: rgba(255, 255, 255, .3);右侧背景色 */
  
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
}
.box{
    text-align: center;
    width: 74%; /* 右侧容器宽度 */
    max-width: 340px; /* 最大宽度 */
}
</style>
<style lang="scss" scoped>
  .header{
    position: absolute;
    top: 0;
    right: 0;
  }
  .login-wrapper {
    position: relative;
    .header {
      position: absolute;
      top: 0;
      right: 0;
      left: 0;
      z-index: 99;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 40px;
      color: #fff;
      background: transparent;
      .logo {
        justify-content: start;
        :deep(.logo-title) {
          color: #fff !important;
        }
      }
      .lang:hover {
        background: transparent;
      }
    }
    .login-container {
      display: flex;
      //width: 100%;
      height: 100vh;
      overflow: hidden;
      align-items: center;
      justify-content: center;
      background-size: cover; /* 图片按比例缩放，完全覆盖容器 */
      background-repeat: no-repeat; /* 不重复显示背景图片 */
      // background: linear-gradient(200deg, #e3c5eb, #a9c1ed);
      background-image: url('@/assets/login/login_bj1.jpg');
      .login-left {
        position: relative;
        display: flex;
        flex-direction: column;
        width: 50vw;
        height: 100%;
        //background-image: url('@/assets/login-bg-dark.svg');
        background-repeat: no-repeat;
        background-position: 100%;
        background-size: auto 100%;
        &-wrap {
          height: 80vh;
          margin: auto;
          .img {
            width: 280px;
            margin-top: 10vh;
          }
          .title,
          .desc {
            max-width: 500px;
            font-weight: bold;
            color: #fff;
            letter-spacing: 1.2px;
          }
          .desc {
            font-size: 28px;
          }
          .tip {
            color: #fff;
          }
        }
      }
      .login-form {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 50vw;
        height: 100vh;
        .form-warp {
          // width: 400px !important;
          // margin-right: 80px;
          padding: 1rem 3rem 0 3rem;
          //margin: auto;
          background-color: rgba(255, 255, 255,.4);
          border-radius: 8px;
        }
        &.is-mobile {
          width: 100%;
          .form-warp {
            width: 100%;
            //margin: 0 15px;
          }
        }
      }
    }
  }
  ul li {
  position: absolute;
  border: 1px solid #FFFFFF;
  background-color: #FFFFFF;
  width: 30px;
  height: 30px;
  list-style: none;
}

.square li {
  top: 40vh;
  left: 60vw;
  animation: square 10s linear infinite;
  opacity: 0;
}

.square li:nth-child(2) {
  top: 80vh;
  left: 10vw;
  animation-delay: 2s;
}

.square li:nth-child(3) {
  top: 80vh;
  left: 85vw;
  animation-delay: 4s;
}

.square li:nth-child(4) {
  top: 10vh;
  left: 70vw;
  animation-delay: 6s;
}

.square li:nth-child(5) {
  top: 10vh;
  left: 10vw;
  animation-delay: 8s;
}


.circle li {
  bottom: 0;
  left: 15vw;
  animation: circle 10s linear infinite;
}

.circle li:nth-child(2) {
  left: 35vw;
  animation-delay: 2s;
}

.circle li:nth-child(3) {
  left: 55vw;
  animation-delay: 6s;
}

.circle li:nth-child(4) {
  left: 75vw;
  animation-delay: 4s;
}

.circle li:nth-child(5) {
  left: 90vw;
  animation-delay: 8s;
}


@keyframes square {
  0% {
    transform: scale(0) rotateY(0deg);
    opacity: 1;
  }
  100% {
    transform: scale(5) rotateY(1000deg);
    opacity: 0;
  }
}

@keyframes circle {
  0% {
    transform: scale(0) rotateY(0deg);
    opacity: 1;
    bottom: 0;
    border-radius: 0;
  }
  100% {
    transform: scale(5) rotateY(1000deg);
    opacity: 0;
    bottom: 90vh;
    border-radius: 50%;
  }


}
</style>
